<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>


<div id="app">

    <input v-myfocus>

    <div  v-demo:foo.a.b="message"></div>

    <div v-demo2="{ color: 'white', text: 'hello!' }"></div>
</div>
<script>

    // 注册全局自定义指令
    // Vue.directive('myfocus',{
    //     // 当被绑定的元素插入到 DOM 中时……
    //     inserted:function (el) {
    //         // 聚焦元素
    //         el.focus()
    //     }
    // });

    Vue.directive('demo2', function (el, binding) {
        console.log(binding.value.color) // => "white"
        console.log(binding.value.text)  // => "hello!"
    })
    Vue.directive('demo', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                'name: '       + s(binding.name) + '<br>' +
                'value: '      + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: '   + s(binding.arg) + '<br>' +
                'modifiers: '  + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    })
    const vm = new Vue({
        el: "#app",
        data: {
            count:1,
            message:'hello 感谢使用钩子函数参数'
        },
        components: {

        },
        myOption: "",
        mixins: [],
        // 注册局部指令
        directives: {
            myfocus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {

        },
        computed: {

        }
    })
</script>
</body>
</html>
